<template> <!--我的联系人-->
  <div class="Contacts">
    <div class="router-box" style="margin-bottom: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <router-link :to="{name:'CustomerInfo'}">客户信息</router-link>
        </el-col>
        <el-col :span="12">
          <router-link :to="{name:'Contacts'}">我的联系人</router-link>
        </el-col>
      </el-row>
    </div>

    <div class="search-box">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

    </div>


    <div class="absolute-box" style='flex:1' v-if='contexter.length>0'>
      <vue-ztree :list.sync='contexter'
                 :contextmenu='contextmenuClick'
                 v-on:getDetail="getDetail"
                 :is-open='false'>

      </vue-ztree>
    </div>
    <!-- 弹出详情 -->
    <el-dialog :title="model.name" :visible.sync="dialogFormVisible">
      <el-form :model="model">
        <el-form-item label="姓名">
          <el-input v-model="model.name" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="model.sexType" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="model.mobilePhone" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="model.remark" readonly="readonly" type="textarea "></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import vueZtree from 'components/vue-ztree.vue'
  // import guest from'/api/Guest/GetGuestByCondition.json'
  export default {
    data() {
      return {
        contexter: {},
        showDetail: false,
        dialogFormVisible: false,
        model: {},
      }
    },
    methods: {
      // 点击节点
      nodeClick: function (m) {
        console.log(JSON.parse(JSON.stringify(m)));
      },
      // 右击事件
      contextmenuClick: function () {
        console.log("触发了自定义的contextmenuClick事件");
      },
      // 点击展开收起
      expandClick: function (m) {
        console.log(JSON.parse(JSON.stringify(m)));
        // 点击异步加载
        if (m.isExpand) {
          // 动态加载子节点, 模拟ajax请求数据
          // 请注意 id 不能重复哦。
          if (m.hasOwnProperty("children")) {

            m.loadNode = 1; // 正在加载节点

            setTimeout(() => {

              m.loadNode = 2; // 节点加载完毕

              m.isFolder = !m.isFolder;

              var node = JSON.parse(JSON.stringify(m));

              // 动态加载子节点, 模拟ajax请求数据
              // 请注意 id 不能重复哦。
              if (node.hasOwnProperty("children")) {
                node.children.push({
                  id: +new Date(),
                  name: "动态加载节点1",
                  path: "",
                  clickNode: false,
                  isFolder: false,
                  isExpand: false,
                  loadNode: 0,
                  children: [{
                    id: +new Date() + 1,
                    name: "动态加载末节点",
                    path: "",
                    clickNode: false,
                    isFolder: false,
                    isExpand: false,
                    loadNode: 0
                  }]
                });

                m.children = node.children;
              }

            }, 1000)

          }
        }
      },
      getDetail: function (m) {
        // this.showDetail=true;
        this.dialogFormVisible = true;
        this.model = m;
      }
    },
    components: {
      vueZtree
    },
    created() {
      // 在模板渲染成html前调用,即通常初始化某些属性值
      this.$http.get('/mock/Guest/GetContexterByCondition.json').then((response) => {
        response = response.body;
        var _data={ total: 0, rows: [] };
        if (response && response.rows && response.total > 0) {
          _data.total = response.total;
          let key;
          for (key in response.rows) {
            var children=response.rows[key];
            for (var i=0;i<children.length;i++){
              children[i].label=children[i].name
            }
            _data.rows.push({gid: key, name: key,label:key,children:children});
          }
          response = _data;
          this.contexter = response.rows;
        }
      });
    },
    mounted() {
    }
  }
</script>

<style>
</style>